<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0 ;
				padding: 0;
			}
			.small-pic{
				width: 200px;
				height: 200px;
				border: 1px solid #ccc;
				position: relative;
			}
			.small-pic img{
				width: 100%;
			}
			
			#big-pic{
				position: relative; 
				width: 400px;
				height: 400px;
				border: 1px solid #ccc;	
				overflow: hidden;/*overflow:hidden  若果子元素定位 父元素没定位 则失效*/
			}
			.big-pic img{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
			
			.glass{
				width: 80px;
				height: 80px;
				background: rgba(211,255,255,0.6);
				position: absolute;
				left: 0;
				top: 0;
			}
			
		</style>
	</head>
	<body>
		<div class="small-pic">
			<img src="img/macbook-small.jpg" alt="" />
			<div class="glass"></div>
		</div>
		<div class="big-pic" id="big-pic">
			<img src="img/macbook-big.jpg" alt="" />
		</div>
		<script>
			var small_pic = document.querySelector('.small-pic');
			var big_pic = document.querySelector('.big-pic');
			var glass = document.querySelector('.glass');
			var l,t;
			var small_img = document.getElementsByTagName('img')[0];
			var big_img = document.getElementsByTagName('img')[1];;
			document.addEventListener('mousemove',function (e) {
				l = e.clientX - small_pic.offsetLeft - glass.clientWidth/2;
				t = e.clientY - small_pic.offsetTop - glass.clientHeight/2;
				
					
				glass.style.left = l + 'px';
				glass.style.top =  t + 'px';
				
				var persent_l = l /(small_img.offsetWidth - glass.offsetWidth);
				var persent_t = t /(small_img.offsetHeight - glass.offsetHeight);
			
			 	bigPicMove(persent_l,persent_t);
			});
		
			
			function bigPicMove(p1,p2){
				big_img.style.left = - (big_img.offsetWidth - big_pic.offsetWidth - 2) * p1 + 'px';
				big_img.style.top = - (big_img.offsetHeight - big_pic.offsetHeight - 2) * p2 + 'px';	
				console.log(big_pic.offsetWidth);
			}
		</script>
	</body>
</html>
